<template>

    <div>

        <h2>油卡列表</h2>

        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="sendCoupon" size="mini">发放优惠券</el-button>
                    </el-form-item>
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.field" placeholder="搜索字段">
                            <el-option label="用户ID" value="user_id"></el-option>
                            <el-option label="手机号" value="mobile"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                       <el-select v-model="params.status" placeholder="">
                           <el-option label="全部" :value="0" :key="0"></el-option>
                           <el-option label="已使用" :value="2" :key="2"></el-option>
                           <el-option label="未使用" :value="1" :key="1"></el-option>
                           <el-option label="已过期" :value="3" :key="3"></el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reload">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="user_id"
                        label="用户ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="优惠券面额">
                </el-table-column>
                <el-table-column
                        prop="min_amount"
                        label="最低消费额">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==1" size="mini">未使用</el-tag>
                    <el-tag v-if="scope.row.status==2" size="mini">已使用</el-tag>
                    <el-tag v-if="scope.row.status==3" size="mini">已过期</el-tag>
                    <el-tag v-if="scope.row.status==4" size="mini">未支付订单锁定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="used_at"
                        label="使用时间"
                >
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="领取时间"
                >
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <el-dialog  title="发放优惠券" :visible.sync="dialogVisible">
            <div>
                <el-form ref="form" :model="infoItem" label-width="80px">
                  <el-form-item label="待发放的优惠券">
                      <el-input v-model="infoItem.coupon_id" size="small" style="width:200px"></el-input>
                  </el-form-item>
                  <el-form-item label="接收用户ID">
                      <el-input v-model="infoItem.user_id" size="small" style="width:200px"></el-input>
                  </el-form-item>
                  <el-form-item>
                  <el-button type="primary" @click="doSubmit">保存数据</el-button>
                  <el-button @click="doCancel">取消</el-button>
                </el-form-item>
              </el-form>
          </div>
        </el-dialog>

    </div>

</template>
<script>
    export default {
      data() {
        return {
          items: [],
          loading: true,
          params: {
            limit: 10,
            offset: 0,
            field: 'mobile',
            keyword: '',
            status:0
          },
          currentPage: 1,
          total: 0,
          dialogVisible:false,
          infoItem:{}
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/member/coupon', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        sendCoupon(){
            this.dialogVisible = true;
            this.infoItem = {};
        },
        doCancel(){
            this.dialogVisible = false;
            this.infoItem = {};
        },
        doSubmit(){
            axios.post('/admin/api/member/coupon/send',this.infoItem).then(()=>{
                this.dialogVisible = false;
                this.reload();
            });
        }
      }
    }
</script>